<template>
    <div class="container">
        <div class="btns">
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="finish">{{ isAdd ? '创建' : '保存' }}</el-button>
        </div>
        <div class="edit_content">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <div class="subPage">
                        <div class="row">
                            <div class="item">
                                <span class="item-title">
                                    <span style="color:red">*</span>
                                    账号：</span
                                >
                                <el-input placeholder="请输入账号" v-model="selItem.loginNo" maxlength="30"> </el-input>
                            </div>
                            <div class="item">
                                <span class="item-title"><span style="color:red">*</span>状态：</span>
                                <el-radio-group v-model="selItem.status">
                                    <el-radio :label="0">启用</el-radio>
                                    <el-radio :label="-1">禁用</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                        <span class="desc">仅限“字母”、“数字”、“_”，4~30个字符以内。</span>
                        <div class="row">
                            <div class="item">
                                <span class="item-title"><span style="color:red">*</span>姓名：</span>
                                <el-input placeholder="请输入姓名" v-model="selItem.userName" maxlength="30"> </el-input>
                            </div>
                            <div class="item">
                                <span class="item-title"><span style="color:red">*</span>手机号：</span>
                                <el-input placeholder="请输入手机号" v-model="selItem.mobile" maxlength="11"> </el-input>
                            </div>
                        </div>
                        <div class="row">
                            <div class="item">
                                <span class="item-title">部门：</span>
                                <el-input placeholder="请输入部门" v-model="selItem.deptName" maxlength="30"> </el-input>
                            </div>
                            <div class="item">
                                <span class="item-title">职位：</span>
                                <el-input placeholder="请输入职位" v-model="selItem.jobPosition" maxlength="30"> </el-input>
                            </div>
                        </div>
                        <div class="row">
                            <div class="item">
                                <span class="item-title">备注：</span>
                                <el-input placeholder="请输入内容" v-model="selItem.remarks" maxlength="200"> </el-input>
                            </div>
                        </div>
                        <span style="margin-top:40px;font-size:13px">提示：“<span style="color:red">*</span>”为必填项</span>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="权限" name="second">
                    <span>请勾选下面的角色，设置账号权限（可多选，至少选一项）</span>
                    <el-checkbox-group v-model="roles">
                        <div class="roleItem" v-for="(item, index) in roleList" :key="index">
                            <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                            <span class="remark">{{
                                item.remarks || 'ss哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
                            }}</span>
                        </div>
                    </el-checkbox-group>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        selItem: {
            type: Object,
            default: {
                loginNo: '',
                userName: '',
                mobile: '',
                roleName: '',
                status: '',
                deptName: '',
                jobPosition: '',
                remarks: '',
                roles: []
            }
        },
        isAdd: Boolean,
        selRole: Array
    },
    data() {
        return {
            activeName: 'first',
            roleList: [],
            roles: this.selRole
        };
    },
    created() {
        this.getData();
        this.roles;
    },
    methods: {
        getData() {
            this.$api
                .get({
                    url: '/adminUser/getCanAllocatedRole'
                })
                .then(res => {
                    this.roleList = res.data || [];
                })
                .catch(err => {});
        },
        back() {
            this.$emit('back');
        },
        finish() {
            var regex = new RegExp('^[0-9a-zA-Z_]{4,30}$');
            if (!regex.test(this.selItem.loginNo)) {
                this.$message.error('账号有误，请重新输入');
                return;
            }
            if (!(this.selItem.status == '0' || this.selItem.status == '-1')) {
                this.$message.error('请选择状态');
                return;
            }
            if (!this.selItem.userName || this.selItem.userName.length == 0) {
                this.$message.error('请输入姓名');
                return;
            }
            if (!this.selItem.mobile || this.selItem.mobile.length != 11) {
                this.$message.error('手机号有误，请重新输入');
                return;
            }
            let roles = this.roles.map(x => x) || [];
            if (roles.length == 0) {
                this.$message.error('请至少选择一项权限');
                return;
            }
            let data = {
                loginNo: this.selItem.loginNo,
                userName: this.selItem.userName,
                mobile: this.selItem.mobile,
                deptName: this.selItem.deptName,
                jobPosition: this.selItem.jobPosition,
                status: this.selItem.status,
                id: this.selItem.id || null,
                remarks: this.selItem.remarks,
                roleIds: roles
            };
            this.$api
                .post({
                    url: '/adminUser/save',
                    data: data
                })
                .then(res => {
                    this.$emit('save');
                })
                .catch(err => {});
        },
        handleClick() {}
    }
};
</script>

<style scoped lang="scss">
.container {
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .edit_content {
        margin-top: 20px;
        .subPage {
            display: flex;
            flex-direction: column;
            min-height: 350px;
            .row {
                margin-top: 20px;
                display: flex;
                .item {
                    margin-right: 10px;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .item-title {
                        min-width: 80px;
                    }
                }
            }
            .desc {
                padding-left: 80px;
                font-size: 12px;
                color: cornflowerblue;
            }
        }
    }
    .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .roleItem {
            width: 48%;
            padding: 5px 10px;
            box-sizing: border-box;
            border: 1px solid #dcdfe6;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            .remark {
                padding-left: 25px;
                font-size: 12px;
                color: #999;
            }
        }
    }
}
</style>
